<template>
    <div class="conMain">
        <div class="side-left">
            <h3>默认起点设置</h3>
            <div class="input-wrap" @click="inputFloor()"><input class="floor" placeholder="楼栋" v-model="floor" disabled="disabled"/></div>
            <div class="input-wrap" @click="inputLayer()"><input class="layer" placeholder="楼层" v-model="layer" disabled="disabled"/></div>
            <div class="input-wrap" @click="inputRoom()"><input class="room" placeholder="科室" v-model="showRoom" disabled="disabled"/></div>
            <div class="input-wrap">
                <button class="btn" @click="okFn">确定</button>
            </div>
        </div>
        <div class="side-right noTitle">
            <div class="select-wrap">
                <!--楼栋-->
                <ul class="itemUl" v-if="floorLis.state==true">
                    <li class="itemLi" v-for="(item,$index) in floorLis.lis" @click="selectFloor(item.name,$index)"><em>vertical-align: middle;</em><span>{{item.name}}</span></li>
                </ul>
                <!--楼层-->
                <ul class="itemUl" v-if="layerLis.state==true">
                    <li class="itemLi" v-for="(item,$index) in layerLis.lis" @click="selectLayer(item.name,$index)"><em>vertical-align: middle;</em><span>{{item.name}}</span></li>
                </ul>
                <!--科室-->
                <ul class="itemUl" v-if="roomLis.state==true">
                    <li class="itemLi curr" @click="allRoom(roomLis.lis)">全部科室</li>
                    <li class="itemLi" v-for="(item,$index) in roomLis.lis" @click="selectRoom(item.name)"><em>vertical-align: middle;</em><span>{{item.name}}</span></li>
                </ul>
                <!--确定按钮-->
                <ul class="itemUl" v-if="okBtnState==true">
                    <li class="itemLi" @click="okFn">确定</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import common from '../common/com'
    import {
        saveUrl,addressUrl
    } from '../common/ajax'
    export default{
        props:{
            siteAlias:{
                type:Array,
                default:function(){
                    return []
                }
            }
        },
        data(){
            return{
                floor:'',
                floorId:'',
                floorLis:{
                    state:true,
                    lis:[]
                },
                layer:'',
                layerId:'',
                layerLis:{
                    state:false,
                    lis:[]
                },
                room:[],
                showRoom:'',
                roomLis:{
                    state:false,
                    lis:[]
                },
                okBtnState:false,
                isSave: false,
            }
        },
        methods:{
            //加载
            loadFloor(){
                jQuery.ajax({
                    url: addressUrl,
                    type:'get',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        if(data.success){
                            this.floorLis.lis = data.data;
                        }else {
                            throwErrorTips('获取地址楼栋失败',data.msg)
                        }
                    }.bind(this)
                });
            },
            //选择
            selectFloor(name,index){
                this.floor=name;
                //清除楼层，科室
                this.layer='';
                this.room=[];
                //楼栋消失，
                this.floorLis.state=false;
                //显示楼层
                this.layerLis.state=true;
                common.inputOutline('.layer');
                this.layerLis.lis = this.floorLis.lis[index].vals
            },
            selectLayer(name,index){
                this.layer=name;
                this.room=[];
                this.showRoom = ''
                this.layerLis.state=false;
                this.roomLis.state=true;
                common.inputOutline('.room');
                this.roomLis.lis = this.layerLis.lis[index].vals
            },
            selectRoom(name){
                if(!this.room.includes(name)){
                    this.room.push(name)
                }else {
                    let l = []
                    this.room.forEach(v=>{
                        if(v!=name){
                            l.push(v)
                        }
                    })
                    this.room = l.map(v=>{return v})
                }

                this.showRoom = this.room.join(' / ')
            },
            allRoom(lis){//全部科室
                this.room = lis.map(v=>{return v.name})
                this.showRoom = this.room.join(' / ')
                this.roomLis.state=false;
                this.okBtnState=true;
            },
            //点击输入框
            inputFloor(){
                this.floorLis.state=true;
                this.layerLis.state=false;
                this.roomLis.state=false;
                this.okBtnState=false;
                this.loadFloor();
            },
            inputLayer(){
                this.floorLis.state=false;
                this.layerLis.state=true;
                this.roomLis.state=false;
                this.okBtnState=false;
            },
            inputRoom(){
                this.floorLis.state=false;
                this.layerLis.state=false;
                this.roomLis.state=true;
                this.okBtnState=false;
            },
            okFn(){
                if(this.floor==''){
                    this.$Message({type:'error',message:'请选择默认起点！'})
                    return;
                }
                if(this.layer==''){
                    this.$Message({type:'error',message:'楼层不能为空！'})
                    return;
                }
                if(this.room.length == 0){
                    this.$Message({type:'error',message:'科室不能为空！'})
                    return;
                }
                if(!this.isSave){
                    this.isSave = true;
                    jQuery.ajax({
                        url: saveUrl,
                        type:'post',
                        dataType: 'json',
                        data:{ld:this.floor,lc:this.layer,ks:this.showRoom},
                        cache: false,
                        success: function(data) {
                            this.isSave = false;
                            if(data.success){
                                this.$Message({type:'success',message:'设置默认起点成功！'})
                                sessionStorage.setItem('preRomm','');
                                this.$emit("startSetOk");
                            }else {
                                throwErrorTips('设置默认起点失败',data.msg)
                            }
                        }.bind(this),
                        error:function(){
                            this.isSave = false;
                        }.bind(this)
                    });
                }
            }
        },
        created() {
            this.loadFloor();
            setTimeout(function(){
                common.inputOutline('.floor');
            }.bind(this),400)
        },
        components:{
        }
    }
</script>
